<template>
  <div>
    <!-- <h3 class="thin" :class="isItalic?'italic':''">MyStyle 组件</h3>  -->
    <!-- <h3 class="thin" :class="[isItalic?'italic':'',isDelete?'delete':'']">MyStyle 组件</h3> 
    <button @click="isItalic=!isItalic">Toggle Italic</button>
    <button @click="isDelete=!isDelete">Toggle Italic</button> -->
    <h3 class="thin" :class="classObj">MyStyle 组件</h3> 
    <button @click="classObj.italic=!classObj.italic">Toggle Italic</button>
    <button @click="classObj.delete=!classObj.delete">Toggle Italic</button>
    <hr>
    <div :style="{color:active,'font-size':fsize+'px','background-color':bgColor}">xxx</div>
    <button @click="fsize+=1">+1</button>
    <button @click="fsize--">-1</button>

    
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      // 字体是否倾斜
      isItalic: false,
      // 是否应用删除效果
      isDelete:false,
      classObj:{
        italic:false,
        delete:false
      },
      // 高亮时的文本颜色
      active:'red',
      // 文字大小
      fsize:30,
      // 背景颜色
      bgColor:'blue'
    }
  },
}
</script>

<style lang="less">
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}
//添加删除线
.delete {
  text-decoration: line-through;
}
</style>
